<template>

  <el-container>
    <el-aside width="200px"
              :class="collapsed?'menu-collapsed':'menu-expanded'">
      <div class="lh60 h60 f30 center colorfff"
           style="background-color:#23262e;">
        {{collapsed?'':sysName}}
      </div>
      <div class="menu">
        <!--导航菜单-->
        <el-menu :default-active="$route.path"
                 router
                 class="el-menu-vertical-demo"
                 text-color="#fff"
                 active-text-color="#409EFF"
                 @open="handleOpen"
                 @close="handleClose"
                 :collapse="collapsed">
          <template v-for="(v,i) in menu"
                    v-if="!v.hidden">
            <el-submenu :index="i+''"
                        :key="i"
                        v-if="!v.children||v.children&&v.children.length>1 ">
              <template slot="title">
                <i :class="v.iconCls"></i>
                <span slot="title">{{v.name}}</span>
              </template>
              <template v-for="(c,j) in v.children">
                <el-menu-item :index="c.path"
                              :key="j">
                  <i :class="c.iconCls"></i>
                  <span slot="title">{{c.name}}</span>
                </el-menu-item>
              </template>
            </el-submenu>
            <el-menu-item v-if="v.children&&v.children.length==1"
                          :index="v.children&&v.children.length==1&&v.children[0].path"
                          :key="i">
              <i class="el-icon-location"></i>
              <span slot="title">{{v.name}}</span>
            </el-menu-item>
          </template>
   
        </el-menu>
      </div>
    </el-aside>
    <el-container>
      <el-header class="pdl-0">
        <el-row>
          <el-col :span="1"
                  class="center">
            <div class="tools"
                 @click.prevent="collapse">
              <i class="colorfff"
                 :class="collapsed?'el-icon-s-unfold':'el-icon-s-fold'"></i>
            </div>
          </el-col>
          
          <el-col :span="23">
            <div class="flex-between">
              <span class="colorfff font22">{{sysUserName || ""}}</span>
              <div class="flex-center">
                <el-badge v-if="msg!=0" :value="msg" :max="10" class="item hand " style="margin-right:30px">
                   <i @click="toMsg" class="font20  colorfff el-icon-bell"></i>
                </el-badge>
                <i v-else class="font20 mgr-20 colorfff el-icon-bell"></i>
                <span class="colorfff mgr-20" v-if="nowTime">{{nowTime}}</span>
                <el-dropdown trigger="hover">
                  <div class="flex-center">
                    <el-avatar :size="40" :src="sysUserAvatar" class="tupian"></el-avatar>
                    <div class="flex-center-c mgl-10" style="color:white;justify-content: center;height:60px">
                      <div class="line1"> 欢迎您！ </div>
                      <div class="line1"> {{sysUserName}} </div>
                    </div>
                  </div>
                  
                  <el-dropdown-menu slot="dropdown">
                    <!-- <el-dropdown-item></el-dropdown-item> -->
                    <el-dropdown-item @click.native="gotoPersonal">个人中心</el-dropdown-item>
                    <el-dropdown-item divided @click.native="gotoCode">忘记密码</el-dropdown-item>
                    <el-dropdown-item divided
                                      @click.native="logout">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
          </el-col>
          <!-- <el-col :span="1"
                  :push="22">
            <el-dropdown trigger="hover">
              <div class=""
                   style="color:white;display:block;"><img width="33px"
                     height="33px"
                     class="mgt-10 img"
                     :src="sysUserAvatar" />
                <div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width:50px;">
                  {{sysUserName}}
                </div>

              </div>
              <el-dropdown-menu slot="dropdown">
          
                <el-dropdown-item @click.native="gotoPersonal">个人中心</el-dropdown-item>
                <el-dropdown-item divided
                                  @click.native="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col> -->
        </el-row>
      </el-header>
      <el-main>
        <div class="pd-20 bg-white">
          <transition name="fade"
                      mode="out-in">
            <router-view></router-view>
          </transition>
        </div>
      </el-main>
      <!-- <el-footer class="center lh45"
                 height="45">Footer
      </el-footer> -->
    </el-container>
  </el-container>
</template>

<script>
// import headimg from '../img/1112.png'
export default {

  data () {
    return {
      msg:'',
      nowTime:[],
      photo:'',
   
      info:'',
      warehouse:'',
      msg:'',
      menu: this.$store.state.menu,
      btns: [],
      sysName: '总平台管理端',
      collapsed: false,
      sysUserName: '',
      sysUserAvatar: '',
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    }
  },
  created () {
   
    // this.nowTimes();
    // console.log(this.$route)
    // this.getList();
    // console.log(this.$store.state.getters);
    // console.log(this.$store.state.ge)
    // this.getSelectOptions();
    // this.sysUserAvatar = headimg;
    this.getList();
    this.getMessageCount();
  },
  watch: {
    $route (to, from) {
      console.log(to)
    }
  },
  methods: {
    toMsg(){
      console.log("调整")
      this.$router.push('/xiaoxi/xiaoxilist');
    },
 
     //消息未读总条数
    getMessageCount(){
      this.$api.message.getMessageCount()
      .then((d) => {
       if(d.code==200){
         this.msg=d.data;
         console.log("this.msg="+this.msg)
       }
       else{
         this.$message.error(d.msg);
       }
        
      })
      .catch((e) => {
        console.log(e);
      });
    },
    getSelectOptions () {
      let user = JSON.parse(sessionStorage.getItem('user'));
      console.log(user.roleList);

    },
    getList () {
      this.$api.admincustomer.getcustomerinfo().then(d => {
        if (d.code == 200) {
          // console.log('成功');
          if (d.data.headUrl == null) {
            this.sysUserAvatar = require('../assets/images/dingning.png')
          } else {
            this.sysUserAvatar = d.data.headUrl;
          }
          if (d.data.nickName == null) {
            d.data.nickName = ''
          } else {
            this.sysUserName = d.data.nickName;
          }
          if (d.data.customerPhone == null) {
            d.data.customerPhone = '无'
          }
          this.form = d.data;
        }
      })
    },
     //消息未读总条数
    getMessageCount(){
      this.$api.admincustomer.xiaoxishuliang()
      .then((d) => {
        this.msg=d.data;
        console.log("this.msg===================="+this.msg)
      })
      .catch((e) => {
        console.log(e);
      });
    },


    gotoPersonal () {
      this.$router.push('/personal/list');
    },
    show () {
      console.log(this.$store.state.menu);
    },
    initBtn (btns) {

    },
    onSubmit () {
      console.log('submit!');
    },
    handleOpen () {
      //console.log('handleopen');
    },
    handleClose () {
      //console.log('handleclose');
    },
    handleSelect: function (a, b) {
    },
    //退出登录
    logout: function () {
      this.$confirm('确认退出吗?', '提示', { type: 'warning' }).then(() => {
        this.$api.admincustomer.customerlogout({}).then(d => {
          if (d.code == 200) {
            sessionStorage.removeItem('token');
            sessionStorage.removeItem('user');
            this.$store.dispatch('set_user', '');
            this.$store.dispatch('set_token', '');
            this.$store.dispatch('set_menu', '');
            console.log(this.$store.state);
            sessionStorage.clear();
            // this.$route.meta.btns
            this.$route.meta.btns = [];
            this.$router.push('/Login');
          } else {
            this.$message.error(d.msg);
          }
        }).catch((e) => {
          console.log(e);
        })
      }).catch(() => {

      });
    },
    defaultBtns (btns) {
      console.log('btns', btns)
    },
    //折叠导航栏
    collapse: function () {
      this.collapsed = !this.collapsed;
    },
     //折叠导航栏
    collapse: function () {
      this.collapsed = !this.collapsed;
    },
    nowTimes(){
      this.timeFormate(new Date());
      setInterval(this.nowTimes,200);
      this.clear()
    },
    //显示当前时间（年月日时分秒）
    timeFormate(timeStamp) {
      let year = new Date(timeStamp).getFullYear();
      let month =new Date(timeStamp).getMonth() + 1 < 10? "0" + (new Date(timeStamp).getMonth() + 1): new Date(timeStamp).getMonth() + 1;
      let date =new Date(timeStamp).getDate() < 10? "0" + new Date(timeStamp).getDate(): new Date(timeStamp).getDate();
      let hh =new Date(timeStamp).getHours() < 10? "0" + new Date(timeStamp).getHours(): new Date(timeStamp).getHours();
      let mm =new Date(timeStamp).getMinutes() < 10? "0" + new Date(timeStamp).getMinutes(): new Date(timeStamp).getMinutes();
      let ss =new Date(timeStamp).getSeconds() < 10? "0" + new Date(timeStamp).getSeconds(): new Date(timeStamp).getSeconds();
      let week = new Date(timeStamp).getDay();
      let weeks = ["日","一","二","三","四","五","六"];
      let getWeek = "星期" + weeks[week];
      this.nowTime = year + "年" + month + "月" + date +"日"+" "+hh+":"+mm+':'+ss+getWeek  ;
    },
    clear(){
     clearInterval(this.nowTimes)
     this.nowTimes = null;
    },
  },
  mounted () {
    var user = sessionStorage.getItem('user');
    if (user) {
      user = JSON.parse(user);
      // this.sysUserName = user.name || '';
      // this.sysUserAvatar = user.avatar || '';
    }
  }
}

</script>


<style  lang="scss">
.menu {
  height: calc(100vh - 60px);
  overflow: hidden;
  overflow-y: auto;
  background-color: #393d49;
}

.menu-collapsed {
  flex: 0 0 60px;
  width: 60px;
}
.menu-collapsed span {
  display: none;
}
.menu-expanded {
  flex: 0 0 200px;
  width: 200px;
}
.menu-expanded span {
  display: inline-block;
}
.menu .el-menu {
  background-color: #393d49;
  border-right: 0px;
}
.el-menu--vertical .el-menu-item {
  color: #303133 !important;
}
.el-menu--vertical .el-menu-item.is-active {
  color: #409eff !important;
}
.menu .el-menu .el-menu-item.is-active {
  background-color: #ecf5ff;
}
.menu .el-menu .el-menu-item.is-active span,
.menu .el-menu .el-menu-item:focus span,
.menu .el-menu .el-menu-item:hover span,
.menu .el-menu .el-menu-item.is-active i,
.menu .el-menu .el-menu-item:focus i,
.menu .el-menu .el-menu-item:hover i {
  color: #409eff;
}
.menu .el-menu .el-submenu__title:hover {
  background-color: #ecf5ff;
}
.menu .el-menu .el-submenu__title:hover span,
.menu .el-menu .el-submenu__title:hover i {
  color: #409eff;
}
.el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
.el-menu--horizontal > .el-submenu .el-submenu__title:hover {
  background-color: #23262e;
}
.el-header {
  background-color: #23262e;
  color: #333;
  // height: 80px !important;
}

.el-footer {
  background-color: #eee;
}

.el-aside {
  color: #333;
  // margin-top: 20px !important;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  height: calc(100vh - 105px);
}

body > .el-container {
  margin-bottom: 40px;
}

.tools {
  height: 60px;
  line-height: 70px;
  cursor: pointer;
  .el-icon-s-fold,
  .el-icon-s-unfold {
    font-size: 25px;
  }
}



.tupian{
  color: #333;
}
</style>
